<div class="report" [ngStyle]="content.style">
  <div class="container">
    <app-header-meta [content]="content.header" />
    <div class="box filter p-x-sm p-y-sm m-bottom-sm flex flex-wrap justify-between items-center">
      <app-formly
        [form]="form"
        [model]="model"
        [fields]="content.form"
        (modelChange)="onModelChange($event)"
      />
      <div class="actions">
        <button mat-raised-button color="primary" (click)="clear()">
          <mat-icon>clear</mat-icon>重置
        </button>
      </div>
    </div>
    <div
      class="box details p-x-sm p-y-sm relative grid grid-cols-12 justify-between items-start gap-5"
    >
      @if (loading) {
        <div class="loading-inner absolute w-full h-full justify-center items-center">
          <app-loading />
        </div>
      }
      @if (box$ | async; as box) {
        @for (item of box; track item) {
          <app-dynamic-component
            class="item block m-bottom col-span-12 md:col-span-6"
            [inputs]="item.content"
          />
        }
      }
    </div>
  </div>
</div>
